import React from 'react';
import { Guid } from '@/utils';
import { Button, Col, Row } from 'antd';
import Modal from 'ronds-react-ui/es/components/Modal';
import LabelImg from 'label-img';
// import TimeSeries from '@/comps/LabelTool/core/TimeSeries';
import { LABEL_TYPES, REGION_TYPES } from '@/comps/LabelTool/utils/constant';
import JsonView from '@/comps/JsonView';
import BaseChart from '@/comps/BaseChart';
import LabelTool from '@/comps/LabelTool/regions';
import dog from './dog.jpg';

import './index.less';

const Home = () => {
  const [guid, setGuid] = React.useState<string>('');
  const [selectItem, setSelectItem] = React.useState<any[]>([]);

  const [modalVisible, setModalVisible] = React.useState<boolean>(false);
  const [modalTitle, setModalTitle] = React.useState<string>('');

  const [lb, setLb] = React.useState<any>();

  const myLaberRef = React.useRef<HTMLDivElement | null>(null);

  const date: any[] = React.useMemo(() => {
    const _date: any[] = [];
    let base = +new Date(1968, 9, 3);
    const oneDay = 24 * 3600 * 1000;
    for (let i = 1; i < 200; i++) {
      const now = new Date((base += oneDay));
      _date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    }
    return _date;
  }, []);

  const data: any[] = React.useMemo(() => {
    const _data = [Math.random() * 200];
    for (let i = 1; i < 200; i++) {
      _data.push(Math.round((Math.random() - 0.5) * 20 + _data[i - 1]));
    }
    return _data;
  }, []);

  const chartData: any[] = React.useMemo(() => {
    const _date: any[] = [];
    const _data = [Math.random() * 200];
    const _chartData: any[] = [];
    let base = +new Date(1968, 9, 3);
    const oneDay = 24 * 3600 * 1000;
    for (let i = 1; i < 200; i++) {
      const now = new Date((base += oneDay));
      _data.push(Math.round((Math.random() - 0.5) * 20 + _data[i - 1]));
      _chartData.push([now.getTime(), Math.round((Math.random() - 0.5) * 20 + _data[i - 1])]);
    }

    return _chartData;
  }, []);

  React.useEffect(() => {
    if (myLaberRef.current === null) return;
    const _lb = new LabelImg(myLaberRef.current, {
      width: 800,
      height: 400,
      bgColor: '#000', // 背景色
    });
    console.log('_lb');
    console.log(_lb);

    //     // 注册图形
    //     _lb.register('rect', {
    //       type: 'Rect',
    //       tag: '多边形',
    //       name: '多边形',
    //     });
    //     const Shape = LabelImg.Shape;

    //     _lb.register('polygon', {
    //       type: 'Polygon',
    //       tag: '多边形',
    //       name: '多边形',
    //     });
    // ;

    // 加载图片
    _lb.load(dog);
    //     // 选择标注多边形
    //     _lb.label('Rect');

    setLb({ ..._lb });
  }, [myLaberRef.current]);

  const onBrushChange = (_data: any) => {
    console.log('onBrushChange====');
    console.log(_data);

    setSelectItem([..._data]);
  };

  const initData = [
    {
      value: {
        multipleChoices: ['D'],
      },
      id: '368058be-a',
      type: 'multipleChoices',
    },
    {
      value: {
        start: -36144000000,
        end: -35452800000,
        timeseriesLabels: ['two'],
        color: 'rgba(212,44,127,1)',
      },
      id: 'a1e16997-a',
      type: 'timeseriesLabels',
    },
  ];

  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          setGuid(Guid());
        }}
      >
        生成GUID
      </Button>
      <div style={{ paddingTop: '10px' }}>{guid}</div>

      <Row>
        <Col span={8}>
          <div style={{ height: '300px' }}>
            <LabelTool
              // defalutData={initData}
              style={{ height: '200px' }}
              type={REGION_TYPES.TIME_SERIES}
              value={[chartData]}
              label={[
                {
                  type: LABEL_TYPES.SINGLE_CHOICES,
                  data: ['波形', '长波形'],
                },
                {
                  type: LABEL_TYPES.MULTIPLE_CHOICES,
                  data: ['A', 'B', 'C', 'D'],
                },
                {
                  type: LABEL_TYPES.TIME_SERIES,
                  data: ['one', 'two', 'three', 'four', 'five'],
                },
              ]}
              onBrushChange={onBrushChange}
            />
          </div>
          <div style={{ width: '100%', height: '300px' }}>
            <LabelTool
              defalutData={initData}
              style={{ height: '300px' }}
              type={REGION_TYPES.RZ_TIME_SERIES}
              value={[chartData]}
              label={[
                {
                  type: LABEL_TYPES.SINGLE_CHOICES,
                  data: ['波形', '长波形'],
                },
                {
                  type: LABEL_TYPES.MULTIPLE_CHOICES,
                  data: ['A', 'B', 'C', 'D'],
                },
                {
                  type: LABEL_TYPES.TIME_SERIES,
                  data: ['one', 'two', 'three', 'four', 'five'],
                },
              ]}
              onBrushChange={onBrushChange}
            />
          </div>
        </Col>
        <Col span={8}>
          <div style={{ fontWeight: 'bold' }}>Output Result Preview</div>
          <div style={{ overflow: 'auto', height: '800px' }}>
            <JsonView json={JSON.stringify(selectItem)} />
          </div>
        </Col>
        <Col span={8}>
          <div style={{ overflow: 'auto', height: '100%' }}>
            <div ref={myLaberRef} />
          </div>
        </Col>
      </Row>

      <Modal
        bodyStyle={{
          paddingBottom: 0,
          overflow: 'hidden',
        }}
        title={modalTitle}
        visible={modalVisible}
        itemState={{ width: window.innerWidth * 0.5, height: 550 }}
        style={{ display: 'flex' }}
        minHeight={400}
        minWidth={500}
        onCancel={() => {
          setModalVisible(false);
        }}
      >
        <div style={{ height: '400px' }}>
          {/* <TimeSeries
            value={{ x: date, y: data }}
            label={[
              {
                type: LABEL_TYPES.TIME_SERIES,
                data: ['one', 'two', 'three', 'four', 'five'],
              },
            ]}
            onBrushChange={onBrushChange}
            onNodeClick={onNodeClick}
          /> */}
        </div>
      </Modal>
    </>
  );
};

export default Home;
